<html>
<head>
    <meta charset="UTF-8">
    <title>我的朋友圈</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="main">
<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed">
		<a href="javascript:history.back(-1);" class="aui-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="aui-center">
			<span class="aui-center-title">{{ title }}</span>
		</div>
		<a href="javascript:;" class="aui-navBar-item">
			<i class="icon"></i>
		</a>
	</header>
	<section class="aui-scrollView" style="background-color: #f9f9f9">
	   <div class="message-menu-header" v-if="groupList.length > 0" >好友通知</div>
	   <div class="friend-list" v-if="groupList.length > 0" v-for="group in groupList" :key="group.id">
	   		<div class="friend-items" style="height:79px">
	   			<a href="#"><div class="friend-item" style="height:79px">
	   				<div class="friend-item-headpic big-headpic">
		   				<img class="friend-avator" :src="group.headerUrl" :alt="group.headerUrl"/>
		   			</div>
		   			<div class="friend-item-info" style="height:79px; border-bottom: 1px solid #f5f5f5">
		   				<div class="name message-name mix">{{ group.name }}</div>
		   				<div class="friend-message message-standard mix">{{ group.message }}</div>
		   				<div class="friend-message message-standard mex">来源： ID查找</div>
		   			</div>
		   			<div class="friend-item-cancal-btn" style="height:79px; border-bottom: 1px solid #f5f5f5">
		   				<div class="admit-btn" @click="admit(group)" v-if="group.status == 'REQ'">同意</div>
		   				<div class="text-btn" v-if="group.status == 'RESP'">申请中</div>
		   				<div class="text-btn" v-if="group.status == 'LINK'">已同意</div>
		   			</div>
	   			</div></a>
	   		</div>
	   </div>
	   <div class="menu-header" style="text-align: center; padding-top: 8px; padding-bottom: 8px;" @click="more(3)" v-if="remain == true">更多通知 ></div>
	   <div class="divHeight" v-if="remain == true"></div>
	   <div class="message-menu-header" v-if="friendList.length > 0" >已处理通知</div>
	   <div class="friend-list" v-if="friendList.length > 0" v-for="item in friendList" :key="item.id">
	   <!-- 好友列表 -->
	   		<div class="friend-items" style="height:79px">
	   			<a href="#"><div class="friend-item" style="height:79px">
	   				<div class="friend-item-headpic big-headpic">
		   				<img class="friend-avator" :src="item.headerUrl" :alt="item.headerUrl"/>
		   			</div>
		   			<div class="friend-item-info" style="height:79px; border-bottom: 1px solid #f5f5f5">
		   				<div class="name message-name mix">{{ item.name }}</div>
		   				<div class="friend-message message-standard mix">{{ item.message }}</div>
		   			</div>
		   			<div class="friend-item-cancal-btn" style="height:79px; border-bottom: 1px solid #f5f5f5">
		   				<div class="text-btn" v-if="item.status == 'REJECT'" style="color:red">已拒绝</div>
		   				<div class="text-btn" v-if="item.status == 'LINK'" style="color:green">已同意</div>
		   			</div>
	   			</div></a>
	   		</div>
	   </div>
	</section>
	<footer class="aui-footer aui-footer-fixed">
		<a href="../home/" class="aui-tabBar-item">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-loan"></i>
            </span>
			<span class="aui-tabBar-item-text">首页</span>
		</a>
		<a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-credit"></i>
            </span>
			<span class="aui-tabBar-item-text">消息</span>
		</a>
		<a href="javascript:;" class="aui-tabBar-item ">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-ions"></i>
            </span>
			<span class="aui-tabBar-item-text">资讯</span>
		</a>
		<a href="../content/personal/" class="aui-tabBar-item ">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-meTo"></i>
            </span>
			<span class="aui-tabBar-item-text">我的</span>
		</a>
	</footer>
</section>
</div>
<script src="js/util.js"></script>
<script src="js/message.js"></script>
</body>
</html>